<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>inputEx - Group Usage</title>

<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css">
<link rel="stylesheet" type="text/css" href="../lib/yui/container/assets/container.css"> 
<link rel="stylesheet" type="text/css" href="../lib/yui/assets/skins/sam/skin.css">

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../css/inputEx.css' />
<!--[if IE 6]><link type='text/css' rel='stylesheet' href='../css/inputEx-IE6.css' /><![endif]-->

<!-- Demo CSS -->
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
<link rel="stylesheet" type="text/css" href="css/dpSyntaxHighlighter.css">

 </head>

 <body>

<h1>inputEx - Group Usage</h1>


<!-- Example 1 -->
<div class='exampleDiv'>
	<h2>Basic Group creation</h2>
	<p>Use the following code to create a basic inputEx group.</p>
	<div class='demoContainer' id='container1'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
					var contactFormFields = [
							{type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }]},
							{label: 'Firstname', name: 'firstname', required: true},
							{label: 'Lastname', name: 'lastname', value:'Dupont'},
							{type:'email', label: 'Email', name: 'email', required: true, showMsg: true},
							{type:'radio', label: 'Happy to be there ?', name: 'happy', display:'vertically', choices:[{value: "y", label:"yes"}, {value:"n", label:"no"}]},
							{type:'boolean', label: 'Favorite colors ?', name: 'yellow', rightLabel:"yellow"},
							{type:'boolean', label: ' ', name: 'blue', rightLabel:"blue"},
							{type:'boolean', label: ' ', name: 'red', rightLabel:"red"},
							{type:'url', label: 'Website', name:'website'}
					];
					new inputEx.Group({parentEl: 'container1', fields: contactFormFields, legend: 'Tell us about yourself...'});
		</textarea>
	</div>
</div>


<!-- Example 2 -->
<div class='exampleDiv'>
	<h2>Composition</h2>
	<p>The inputEx.Group class inherits from inputEx.Field</p>
	<div class='demoContainer' id='container2'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
			var contactFormFields = [ {type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }]}, {label: 'Firstname', name: 'firstname', required: true}, {label: 'Lastname', name: 'lastname', value:'Dupont'}, {type:'email', label: 'Email', name: 'email', required: true, showMsg: true}, {type:'radio', label: 'Happy to be there ?', name: 'happy', values:["y","n"], choices:["yes","no"]}, {type:'boolean', label: 'Favorite colors ?', name: 'yellow', rightLabel:"yellow"}, {type:'boolean', label: ' ', name: 'blue', rightLabel:"blue"}, {type:'boolean', label: ' ', name: 'red', rightLabel:"red"}, {type:'url', label: 'Website', name:'website'} ];
			
			new inputEx.ListField({
				elementType: {
					type: 'group',
					fields: contactFormFields
				},
				parentEl: 'container2'
			});
		</textarea>
	</div>
</div>


<!-- Example 3 -->
<div class='exampleDiv'>
	<h2>Updated event</h2>
	<p>How to listen to the updated event :</p>
	<div class='demoContainer' id='container3'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript" cols="60" rows="1">
			var contactFormFields = [ {type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }]}, {label: 'Firstname', name: 'firstname', required: true}, {label: 'Lastname', name: 'lastname', value:'Dupont'}, {type:'email', label: 'Email', name: 'email', required: true, showMsg: true}, {type:'radio', label: 'Happy to be there ?', name: 'happy', values:["y","n"], choices:["yes","no"]}, {type:'boolean', label: 'Favorite colors ?', name: 'yellow', rightLabel:"yellow"}, {type:'boolean', label: ' ', name: 'blue', rightLabel:"blue"}, {type:'boolean', label: ' ', name: 'red', rightLabel:"red"}, {type:'url', label: 'Website', name:'website'} ];
			
			var el = YAHOO.util.Dom.get('container3');
			var group3 = new inputEx.Group({parentEl: el, fields: contactFormFields });
			var logDiv = inputEx.cn('div', null, null, "Log :");
			el.appendChild(logDiv);
			group3.updatedEvt.subscribe(function() {
				logDiv.innerHTML += "Updated at "+(new Date());
				logDiv.appendChild(inputEx.cn('br'));
			});

			var setValueButton = inputEx.cn('button', null, null, "SetValue");
			YAHOO.util.Event.addListener(setValueButton, 'click', function() {
				group3.setValue({
					title: 'Mme',
					firstname: 'Eric',
					lastname: 'Abouaf', 
					happy: "y",
					email: 'something@email.com',
					website: 'http://neyric.github.com/inputex',
					yellow: true
				});
				// when you don't pass all values, default values are applied
				// to missing fields (e.g. : 'blue' and 'red' fields)
				
			});
			el.appendChild(setValueButton);
		</textarea>
	</div>
</div>



<!-- Example 4 -->
<div class='exampleDiv'>
	<h2>Collapsible</h2>
	<p>Collapsible</p>
	<div class='demoContainer' id='container4'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript" cols="60" rows="1">
			var contactFormFields = [ {type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }]}, {label: 'Firstname', name: 'firstname', required: true}, {label: 'Lastname', name: 'lastname', value:'Dupont'}, {type:'email', label: 'Email', name: 'email', required: true, showMsg: true}, {type:'radio', label: 'Happy to be there ?', name: 'happy', values:["y","n"], choices:["yes","no"]}, {type:'boolean', label: 'Favorite colors ?', name: 'yellow', rightLabel:"yellow"}, {type:'boolean', label: ' ', name: 'blue', rightLabel:"blue"}, {type:'boolean', label: ' ', name: 'red', rightLabel:"red"}, {type:'url', label: 'Website', name:'website'} ];
			
			new inputEx.Group({parentEl: 'container4', fields: contactFormFields, legend: 'User Informations', collapsible: true});
		</textarea>
	</div>
</div>



<!-- Example 5 -->
<div class='exampleDiv'>
	<h2>Composition</h2>
	<p>Composition</p>
	<div class='demoContainer' id='container5'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript" cols="60" rows="1">
					var contactFormFields2 = [ 
							{type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }] },
							{label: 'Firstname', name: 'firstname', required: true },
							{label: 'Lastname', name: 'lastname', value:'Dupont', required:false },
							{type:'email', label: 'Email', name: 'email', required: true, showMsg: true},
							{type:'boolean', label: 'Happy to be there ?', name: 'happy'},
							{type:'url', label: 'Website', name:'website'}
					];
					contactFormFields2.push({
						type: 'group',
						name: 'phone',
						collapsible: true,
						legend: 'Phone number',
						fields: [
							{ label: 'Home', name: 'home' },
							{ label: 'Business', name: 'business' },
							{ label: 'Mobile',name: 'mobile' },
							{ label: 'Fax', name: 'fax' }
						]
					});
					var field5 = new inputEx.Group({parentEl: 'container5', fields: contactFormFields2});
					var button5 = inputEx.cn('button', null, null, 'Get value');
					YAHOO.util.Dom.get('container5').appendChild(button5);
					YAHOO.util.Event.addListener(button5, "click", function() {
						alert( YAHOO.lang.JSON.stringify(field5.getValue()) );
					});
					var setValueButton = inputEx.cn('button', null, null, "SetValue");
					YAHOO.util.Event.addListener(setValueButton, 'click', function() {
						field5.setValue({
							title: 'Mme',
							firstname: 'Eric',
							lastname: 'Abouaf', 
							happy: false,
							email: 'something@email.com',
							website: 'http://neyric.github.com/inputex',
							phone:{
								home:"911",
							   fax:"911"
							}
						});
					});
					var el = YAHOO.util.Dom.get('container5');
					el.appendChild(setValueButton);
					var validButton = inputEx.cn('button', null, null, 'Validate');
					YAHOO.util.Dom.get('container5').appendChild(validButton);
					YAHOO.util.Event.addListener(validButton, "click", function() {
						alert( field5.validate() );
					});
		</textarea>
	</div>
</div>




<!-- Example 6 -->
<div class='exampleDiv'>
	<h2>Field descriptions</h2>
	<p>Specify field descriptions</p>
	<div class='demoContainer' id='container6'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
					var descriptedFields = [ 
							{ type: 'select', label: 'Title', name: 'title', description: 'Select your gender',  choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }] },
							{ label: 'Firstname', description: 'Your firstname', name: 'firstname', required: true, value:'Jacques' },
							{ label: 'Lastname', description: 'Your lastname', name: 'lastname', value:'Dupont' },
							{ type:'email', description: 'Your email. We wont send you any commercial information', label: 'Email', name: 'email'},
							{ type:'boolean', description: 'Check this box if you are happy to be there', label: 'Happy to be there ?', name: 'email'},
							{ type:'url', description: 'Your blog url', label: 'Website', name:'website'}
					];
					new inputEx.Group({parentEl: 'container6', fields: descriptedFields, legend: 'User Informations'});
		</textarea>
	</div>
</div>


<!-- Example 7 -->
<div class='exampleDiv'>
	<h2>Flatten output value for a sub-group</h2>
	<p>The parent group will then flatten the sub-group value within its value.</p>
	<p>In this example, we return <i>{firstname: ..., lastname: ..., title:... }</i> instead of <i>{ MySubForm: {firstname: ..., lastname: ...}, title:... }</i>.</p>
	<div class='demoContainer' id='container7'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
					var flattenGroup = new inputEx.Group({
						parentEl: 'container7', 
						legend: 'Flatten demo', 
						name: "MyForm",
						fields: [
					      { 
					          type: 'group',
					          name: "MySubForm",
					          flatten: true,
					          fields: [
					             { label: 'Firstname', name: 'firstname' },
					             { label: 'Lastname', name: 'lastname', description: "Firstname and Lastname are within the same sub-group" }
					          ]
					      },
					      { label: 'Title', name: 'title' }
					   ]
					});
					flattenGroup.updatedEvt.subscribe(function(e,params) {
						var value = params[0];
						YAHOO.util.Dom.get('container7').appendChild( inputEx.cn('div',null,null, YAHOO.lang.JSON.stringify(value)) );
					});
		</textarea>
	</div>
</div>




<!-- Example 8 -->
<div class='exampleDiv'>
	<h2>Set error messages</h2>
	<p>Use the <i>setErrors</i> method on Group or Form instances to set error messages. The field will show the message only if the <i>showMsg</i> option is enabled on this field.</p>
	<p>This feature is helpful for Ajax forms with server-side validation.</p>
	<div class='demoContainer' id='container8'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
					var myForm = new inputEx.Group({
						parentEl: 'container8', 
						name: "MyForm",
						fields: [
					     {label: 'Firstname', name: 'firstname', showMsg: true},
					     {label: 'Age', name: 'age', showMsg: true},
					     {label: 'Title', name: 'title'}
					   ]
					});
					
					myForm.setErrors({
						firstname: "Cannot be empty",
						age: "Must be a number",
						title: "Cannot be empty !!! (not visible because no showMsg)"
					});
					
					// Equivalent call :
					myForm.setErrors([
						["firstname", "Cannot be empty"],
						["age", "Must be a number"],
						["title", "Cannot be empty !!! (not visible because no showMsg)"]
					]);
					
		</textarea>
	</div>
</div>




<!-- YUI Library -->
<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../lib/yui/selector/selector-min.js"></script>
<script type="text/javascript" src="../lib/yui/event-delegate/event-delegate-min.js"></script>
<script type="text/javascript" src="../lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="../lib/yui/json/json-min.js"></script>


<!-- InputEx -->
<script src="../js/inputex.js"  type='text/javascript'></script>
<script src="../js/mixins/choice.js"  type='text/javascript'></script>
<script src="../js/Field.js"  type='text/javascript'></script>
<script src="../js/Group.js"  type='text/javascript'></script>
<script src="../js/fields/StringField.js"  type='text/javascript'></script>
<script src="../js/fields/EmailField.js"  type='text/javascript'></script>
<script src="../js/fields/SelectField.js"  type='text/javascript'></script>
<script src="../js/fields/CheckBox.js"  type='text/javascript'></script>
<script src="../js/fields/RadioField.js"  type='text/javascript'></script>
<script src="../js/fields/ListField.js"  type='text/javascript'></script>
<script src="../js/fields/UrlField.js"  type='text/javascript'></script>

<!-- inputEx examples -->
<script src="js/dpSyntaxHighlighter.js"></script>
<script src="inputex-examples.js"></script>

 </body>
</html>